<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="{{ PYODIDE_BASE_URL }}pyodide.js"></script>
    <style>
      pre {
        background-color: #f7f7f7;
        padding: 10px;
      }
    </style>
  </head>

  <body>
    <h1>Using black formatter in Pyodide</h1>
    <div>
      <textarea id="codeblock" rows="45" cols="80" spellcheck="false">
from pyodide import hello, Pyodide

x = {  'a':37,'b':42,

'c':927}

x = 123456789.123456789E123456789

if very_long_variable_name is not None and \
    very_long_variable_name.field > 0:
    z = 'hello '+'world'
else:
    world = 'world'
    a = 'hello {}'.format(world)
    f = rf'hello {world}'
if (this
and that): y = 'hello ''world'
class Foo  (     object  ):
    def f    (self   ):
        return       37*-2
    def g(self, x,y=42):
        return y
def f  (   a: List[ int ]) :
    return      37-a[42-u :  y**3]
def very_important_function(template: str,*variables,file: os.PathLike,debug:bool=False,):
    """Applies \`variables\` to the \`template\` and writes to \`file\`."""
    with open(file, "w") as f:
        ...
# fmt: off
custom_formatting = [
    0,  1,  2,
    3,  4,  5,
    6,  7,  8,
]
# fmt: on
regular_formatting = [
    0,  1,  2,
    3,  4,  5,
    6,  7,  8,
]
        </textarea
      >
    </div>
    <div>
      <button id="formatButton" onclick="format()" disabled>
        Loading Pyodide...
      </button>
    </div>

    <script type="text/javascript">
      let formatStr = () => {};
      const format = () => {
        const code = document.getElementById("codeblock").value;
        const formattedCode = formatStr(code);
        document.getElementById("codeblock").value = formattedCode;
      };

      async function init() {
        const pyodide = await loadPyodide({
          packages: ["micropip"],
        });

        const micropip = pyodide.pyimport("micropip");
        await micropip.install("black");
        formatStr = pyodide.runPython(`
                import black
                def format_str(code):
                    return black.format_str(code, mode=black.FileMode())

                format_str
            `);

        const button = document.getElementById("formatButton");
        button.disabled = false;
        button.innerText = "Format Me!";
      }

      init();
    </script>
  </body>
</html>
